<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <div class="relative" ref="documentContainer">
       <div
    id="page-conversion-voting-summary"
    class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 text-sm"
  >
    <n-space vertical :size="16" class="h-full">
      <h2 class="text-base font-bold text-center">支部大会讨论预备党员转正表决情况汇总表</h2>

      <div class="leading-relaxed indent-8">
        本支部于
        <span class="underline-placeholder"> &nbsp; &nbsp;</span>年
        <span class="underline-placeholder"> &nbsp;</span>月
        <span class="underline-placeholder"> &nbsp;</span>日召开支部大会，以无记名投票方式对是否同意
        <span class="underline-placeholder">{{ member.memberName }}</span>同志按期转为正式党员进行了表决，应到会有表决权的党员
        <span class="underline-placeholder"> &nbsp;</span>人，实到会有表决权的党员
        <span class="underline-placeholder"> &nbsp;</span>人，共发出表决票
        <span class="underline-placeholder"> &nbsp;</span>张，收回
        <span class="underline-placeholder"> &nbsp;</span>张，未到会有表决权党员书面意见
        <span class="underline-placeholder"> &nbsp;</span>份。其中：有效票
        <span class="underline-placeholder"> &nbsp;</span>张，无效票
        <span class="underline-placeholder"> &nbsp;</span>张。表决结果如下：
      </div>

      <table class="w-full border-collapse border border-solid border-black">
        <thead>
          <tr class="text-center font-bold">
            <td class="p-2 border border-solid border-black">姓 名</td>
            <td class="p-2 border border-solid border-black">同 意</td>
            <td class="p-2 border border-solid border-black">不同意</td>
            <td class="p-2 border border-solid border-black">弃 权</td>
          </tr>
        </thead>
        <tbody>
          <tr class="text-center">
            <td class="p-2 border border-solid border-black">{{ member.memberName }}</td>
            <td class="p-2 border border-solid border-black">____票</td>
            <td class="p-2 border border-solid border-black">____票</td>
            <td class="p-2 border border-solid border-black">____票</td>
          </tr>
        </tbody>
      </table>
      
      <div class="flex-grow"></div>

      <div class="flex justify-between mt-4">
        <span>唱票人：</span>
        <span>计票人：</span>
        <span>监票人：</span>
      </div>

      <div id="section-signature" class="text-right mt-4">
        {{ formattedSignatureDate }}
      </div>
    </n-space>
  </div>
      </div>
    </div>

    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="100" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>





<script setup>
import { computed } from 'vue'
import { NSpace } from 'naive-ui'

const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      memberName: '________', // 默认值
      conversionVotingSummary: {
        signatureDate: null
      }
    })
  },
})

// 格式化落款日期
const formattedSignatureDate = computed(() => {
  const date = props.member?.conversionVotingSummary?.signatureDate
  if (!date) return '年    月    日'
  const [year, month, day] = date.split('-')
  return `${year} 年 ${month} 月 ${day} 日`
})
</script>

<style scoped>
.indent-8 {
  text-indent: 2em;
}
.underline-placeholder {
  text-decoration: underline;
  padding: 0 0.5em; /* 增加一些内边距让下划线更长一些 */
}
</style>